var path = this.path;
define([
    this.path + './../4.x/plugins/esri/layers/DivGraphicsLayer.js'
], function(GraphicsLayer) {
    var divGraphicsLayer = GraphicsLayer.createSubclass({
        // setData: function(mapView, layer) {
        //     debugger
        //     var me = this;
        //     me.imageUrl = path + './../../one-map/1.0.0/src/mode/arcgis/css/images/square.svg';
        //     me.layer = layer;
        //     var options = layer.layer || {};
        //     me.mapView = mapView;
        //     me.mapUtils = mapView.mapUtils;
        //     me.options = options;
        //     me.symbolOptions = options.options || {};
        //     var data = options.data;
        //     if (!data) {
        //         if (typeof options.callback == 'function') {
        //             options.callback(layer);
        //         };
        //         return;
        //     };
        //     var lngLatArray = me.mapUtils.toLngLatArray(mapView, data, options);

        //     me._data = lngLatArray;

        // },
        setData: function(mapView, layer) {
            var me = this;
            me.imageUrl = path + './../../one-map/1.0.0/src/mode/arcgis/css/images/square.svg';
            var options = layer.layer || {};
            me.mapView = mapView;
            me.mapUtils = mapView.mapUtils;
            me.options = options;
            me.symbolOptions = options.options || {};
            me.layer = layer.layer;
            me.spatialReference = mapView.getSpatialReference();

            var symbolFieldName = me.options.symbolFieldName || me.mapView.getSymbolFieldName();
            var data = options.data;

            if (!data || data.length < 1) {
                if (typeof me.options.callback == 'function') {
                    me.options.callback(me.layer);
                };
                return;
            };
            me.setScale(me._element);
            var lngLatArray = data;
            lngLatArray.map(function(lngLat, index) {
                var point = me.mapUtils.createPoint(me.mapView, lngLat);
                var symbol = lngLat[symbolFieldName] || me.options.symbol || {};
                var divGraphic = me.mapUtils.createGraphic(me.mapView, {
                    geometry: point,
                    attributes: lngLat,
                    popupTemplate: null
                });

                me._setElement(divGraphic);
                var eleJQ = $(me._getElement(divGraphic));
                eleJQ.addClass(symbol.class).css(symbol.css || {}).html(symbol.html);
                me._draw(divGraphic);

                me.add(divGraphic);

                divGraphic.attributes = lngLat;

                me.setOffset(me.symbolOptions, eleJQ);

                me.setCollision(divGraphic, me.options);

                if (index == lngLatArray.length - 1) {
                    if (typeof me.options.callback == 'function') {
                        me.options.callback(me.layer);
                    };
                };
            });
        },
        setOffset: function(symbolOptions, eleJQ) {
            if (!symbolOptions) {
                return;
            };
            var offsetx = symbolOptions.offsetx || 0;
            var offsety = symbolOptions.offsety || 0;
            var position = symbolOptions.position || 'top';
            var lineHeight = eleJQ.css('line-height').replace('px', '') || 16;
            var lineCount = Math.ceil(eleJQ.height() / lineHeight);
            switch (position) {
                case 'top':
                    if (lineCount > 1) {
                        offsety = offsety / 2 + lineCount / 2 * lineHeight;
                    };
                    break;
                case 'right':
                    offsetx = offsetx + eleJQ.width() / 2;
                    break;
                case 'bottom':
                    offsety = -offsety;
                    if (lineCount > 1) {
                        offsety = offsety / 2 - lineCount / 2 * lineHeight;
                    };
                    break;
                case 'left':
                    offsetx = -offsetx - eleJQ.width() / 2;
                    break;
            };

            if (offsetx && offsety) {
                eleJQ.css({ 'margin-top': -offsety, 'margin-left': offsetx });
            } else if (offsety) {
                eleJQ.css({ 'margin-top': -offsety });
            } else if (offsetx) {
                eleJQ.css({ 'margin-left': offsetx });
            };

        },
        isOverlap: function(node1, node2) {
            var rect1 = node1.getBoundingClientRect();
            var rect2 = node2.getBoundingClientRect();
            var overlap = !(rect1.right < rect2.left || rect1.left > rect2.right || rect1.bottom < rect2.top || rect1.top > rect2.bottom);
            return overlap;
        },
        setCollision: function(div, options) {
            var me = this;
            if (!options.collision) {
                return
            };
            if (!me.labelCollisionList) {
                me.labelCollisionList = [];
            };
            var isOverlap = false;
            if (me.labelCollisionList.length > 0) {
                for (var i = 0; i < me.labelCollisionList.length; i++) {
                    isOverlap = me.isOverlap(me.labelCollisionList[i]._element, div._element);
                    if (isOverlap) {
                        div.__graphic.__drawn = false;
                        me.remove(div);
                        div._element.style.display = 'none';
                        break;
                    };
                };
            };
            if (!isOverlap) {
                div.__graphic.__drawn = true;
                me.labelCollisionList.push(div);
            };

        },
        getGraphicLocation: function(mapView, esriEvent) {
            var me = this;
            if (!esriEvent || !esriEvent.graphic) {
                return;
            };
            if (!mapView) {
                return;
            };

            var map = mapView.getMap();
            if (!map) {
                return;
            };

            var geometry = esriEvent.graphic.geometry || {};
            // var xoffset = esriEvent.graphic.symbol.xoffset;
            // var yoffset = esriEvent.graphic.symbol.yoffset;
            // var screenPoint = map.toScreen(geometry);
            // screenPoint.x += xoffset;
            // screenPoint.y -= yoffset;
            // geometry = map.toMap(screenPoint);
            var lngFieldName = mapView.getLngFieldName();
            var latFieldName = mapView.getLatFieldName();
            var location = {};
            location[lngFieldName] = geometry.longitude;
            location[latFieldName] = geometry.latitude;
            return location;
        }
    })
    return divGraphicsLayer;
});